<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			li{
				list-style: none;
			}
			#box{
				width: 100%;
				display: flex;
				justify-content: space-around;
				position: relative;
			}
			#left{
				padding-top: 50px;
				width: 30%;
			}
			#right{
				width:40%;
				height: 700px;
				border: 1px solid;
				position: relative;
			}
			#right>div:first-of-type>div{
				display: none;
			}
		  #box	#right .show{
				display: block;
			}
			#left>div{
				margin: 10px 0;
			}
			#left>img{
				display: block;
				margin: 0 auto;
			}
			.btn{
				background-color:#FF6615;
				color: white;
				cursor: pointer;
				text-align: center;
				line-height: 40px;
			}
		#box .add{
				width: 150px;
				margin: 0 auto;
				
			}
		#nav{
			display: flex;
			justify-content: space-between;
			position:fixed;
			bottom:22px;
			width:40%;
		}
		#nav>div{
			flex-grow: 1;
		}
		.red{
			color: red;
		}
		#list>div{
			display: flex;
			justify-content: space-between;
			padding: 0 10px;
			align-items: center;
			border: 1px solid;
			margin: 10px;
		}
		#right #list div.btn{
			font-size: 14px;
			width:100px;
			line-height:30px;
			color: white;
		}
		#right img{
			width: 100px;
			margin-right: 20px;
		}
		#list>div>div>div{
			margin:4px 0;
		}
		#list>div>div>div:nth-of-type(1){
			font-size: 20px;
		}
		#list>div>div>div:nth-of-type(2){
			font-size: 14px;
			color: gainsboro;
		}
		#shops>div{
			display: flex;
			justify-content: space-between;
			align-items: center;
			border: 1px solid;
			margin: 10px;
		}
		#shops div{
			text-align: center;
			padding: 0 10px;
		}
		#shops>div:first-of-type>div>div:last-of-type>div:last-of-type{
			display: flex;
			align-items: center;
			border: 1px solid;
			margin-top: 10px;
		}
		.nbtn{
			background-color: white;
			border: none;
			font-size: 20px;
			margin: 0 6px;
			cursor: pointer;
		}
		#nav .active{
				color:orange;
		}
		#showSum{
			position: fixed;
			bottom:70px;
			text-align: end;
			width: 40%;
			padding-right: 30px;
		}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="left">
				<div>
					商品名称：<input type="text"  id="sname"  />
				</div>
				<div>
					商品单价：<input type="number"  id="price"  />
				</div>
				<img src="02/素材/ErJi.png" id="si">
				<div>商品图片:
				  <!-- ['ErJi.png','ShuBao.png','Bi.png','YaGao.png','ShouHuan.png'] -->
					<select onchange="chanImg(this)" id="imgS">
						<option selected value ="0">蓝牙耳机</option>
						<option value ="1">小米书包</option>
						<option value ="2">小米中性笔</option>
						<option value ="3">防蛀健齿牙膏</option>
						<option value ="4">小米手环</option>
					</select>
					
				</div>
				<div>
					商品描述:
					<textarea rows="6" cols="30" maxlength="30" id="stext"></textarea>
				</div>
				<div class="btn add" id="addBtn">添加到商品列表</div>
			</div>
			<div id="right">
				<div id="content">
				<div id="list" class="show">
					<div>
						<img src="02/素材/ErJi.png" >
						<div>
							<div>蓝牙耳机</div>
							<div>这是小米的蓝牙耳机，入耳式，好用不贵</div>
							<div class="red">99.9元</div>
						</div>
						<div>
						<div class="btn">删除</div>
						<div class="btn">加入购物车</div>
						</div>
					</div>

				</div>
				<div >
					<div id="shops">
						
					
						<div>
								<div>
								<input type="checkbox"  value="" />
								</div>
								<img src="02/素材/ErJi.png" >
								<div>
									<div>蓝牙耳机</div>
									<div class="red">99.9元</div>
								</div>
								<div>
								<div class="btn">删除</div>
								<div> 
								<button type="button" class="nbtn">-</button>
								<span>1</span>
								<button type="button" class="nbtn">+</button>
								</div>
								</div>
						</div>
						</div>
					<div id="showSum">
						共<span id="sumS" class="red">0</span>件商品，已选择<span id="checkSum"
							class="red">0</span>件
							<span class="red">合计：<span id="sumTotal">0</span>元</span>
					</div>
				</div>
				</div>
				<div id="nav">
					<div class="btn active">
						商品列表
					</div>
					<div class="btn">
						购物车
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var imgarr = ['ErJi.png','ShuBao.png','Bi.png','YaGao.png','ShouHuan.png'];
		var sList = [];
		var myList = [];
		window.onload = function () {
			if(localStorage.sList){
				sList = JSON.parse(localStorage.sList);
				for (let i = 0; i <sList.length; i++) {
					   addShop(i);
				}
			    showSList(sList);
			}else{
				localStorage.sList = JSON.stringify([]);
			}
		}
		var divs = document.querySelectorAll("#nav>div");
		var divsT = document.querySelectorAll("#content>div")
		for (let i = 0; i < divs.length; i++) {
			 divs[i].onclick = function(){
				 document.querySelector("#right .active").classList.remove("active");
				 document.querySelector("#right .show").classList.remove("show");
				 this.classList.add("active");
				 var index = Array.from(divs).indexOf(this);
				 divsT[index].classList.add("show");
			 }
		}
		function chanImg(t){
			var img =document.querySelector("#si");
			var str = "02/素材/";
			 str += imgarr[t.value];
			  img.src = str;
		}
		var addBtn = document.querySelector("#addBtn");
		var sname = document.querySelector("#sname");
		var price = document.querySelector("#price");
		var imgS = document.querySelector("#imgS")
		var stext = document.querySelector("#stext")
		addBtn.onclick = function () {
			if(sname.value && price.value && stext.value){
				var img = imgarr[imgS.value];
				var re = sList.some(function (t,i,arr) {
					
					return t.img == img;
				});
				if(re){
					alert("商品已存在");
					return false;
				}
				var s = {
					name:sname.value,
					price:price.value,
					img:img,
					stext:stext.value,
					check:false
				}
				sList.push(s);
				sname.value = price.value = stext.value ="";
				imgS.value = 1;
				localStorage.sList = JSON.stringify(sList);
				showSList(sList);
			}else{
				alert("请先输入内容！");
			}
		}
		var list = document.querySelector("#list")
		function showSList(arr) {
			list.innerHTML = '';
			var str = '';
			for (let i = 0; i < arr.length; i++) {
				str += `			
							<div>								<img src="02/素材/${arr[i].img}" >								<div>								<div>${arr[i].name}</div>								<div>${arr[i].stext}</div>								<div class="red">${arr[i].price}元</div>								</div>
								<div>
								<div class="btn" onclick = 'delS(${i})'>删除</div>
								<div class="btn" onclick= "addShop(${i},this)">加入购物车</div>
								</div>															</div>
				
				`;
			}
			list.innerHTML = str;
		}
		function delS(i){
			sList.splice(i,1);
			for (let n = 0; n < myList.length; n++) {
				if(myList[n].index == i){
					myList.splice(n,1);
					showMy(myList);
					break;
				}
			}
			localStorage.sList = JSON.stringify(sList);
			showSList(sList);
		}
		function addShop(i,t) {
			if(t){
			if(sList[i].check){
				alert("商品已在购物车");
				return false;
			}
			}else if(!sList[i].check){
				return false;
			}
			sList[i].check = true;
			localStorage.sList = JSON.stringify(sList);
			var s = {
				data:sList[i],
				num:1,
				check:false,
				index:i
			}
			myList.unshift(s);
			showMy(myList);
			divs[1].onclick();
		}
		var shops = document.querySelector("#shops")
		function showMy(arr) {
			var str = "";
			console.log(arr);
			for (let i = 0; i < arr.length; i++) {
				str += `
					<div>
							<div>
							<input type="checkbox" onchange = "checkS(${i},this)" ${arr[i].check?"checked":""}  value="" />
							</div>
							<img src="02/素材/${arr[i].data.img}" >
							<div>
								<div>${arr[i].data.name}</div>
								<div class="red">${arr[i].data.price}元</div>
							</div>
							<div>
							<div class="btn" onclick="removeS(${i})">删除</div>
							<div> 
							<button type="button" onclick="jian(${i})" class="nbtn">-</button>
							<span>${arr[i].num}</span>
							<button type="button" onclick = "jia(${i})" class="nbtn">+</button>
							</div>
							</div>
					</div>
				`;
			}
			jisuan()
			shops.innerHTML = str;
		}
		function jia(i) {
			myList[i].num++;
			showMy(myList);
		}
		function jian(i) {
			if(myList[i].num == 1){
				return false;
			}
			myList[i].num--;
			showMy(myList);
			
		}
		function checkS(i,t) {
			myList[i].check = t.checked;
			showMy(myList);
		}
		var sumS = document.querySelector("#sumS");
		var sumTotal = document.querySelector("#sumTotal");
		var checkSum = document.querySelector("#checkSum");
		
		function jisuan() {
			var sumSda = 0;
			var sumTotalda = 0;
			var checkSumda = 0;
		
			for (let i = 0; i < myList.length; i++) {
				if (myList[i].check) {
					checkSumda += myList[i].num;
					sumTotalda += myList[i].num * myList[i].data.price;
				}
				sumSda += myList[i].num;
			}
			sumS.innerText = sumSda;
			sumTotal.innerText = sumTotalda.toFixed(2);
			checkSum.innerText = checkSumda;
		}
		
	</script>
</html>
